@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-image {
    position: relative;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;

	&--rounded {
		border-radius: @border-radius-base;
	}

	&--circle {
		border-radius: 50%;
	}

	&--thumbnail {
		background-color: @component-background;
	    border-radius: @border-radius-base;

	    &:after {
            .hairline(@border-color-split);
            border-width: @border-width-base;
            border-radius: 8px;
        }
	}

	&--thumbnail &__inner,
	&--thumbnail &__mask {
		top: 4px;
		right: 4px;
		bottom: 4px;
		left: 4px;
		width: calc(~"100% - 8px") !important;
		height: calc(~"100% - 8px") !important;
	}

	&--widthFix &__inner {
		position: relative;
	}

	image,
	&__thumb {
		display: inline-block;
		overflow: hidden;
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}

	&__inner {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	&--loaded &__inner {
		opacity: 1;
	}

	&__mask {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 20;

		&--text {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	&__text {
		color: @text-color-secondary;
		text-align: center;
		padding: 10px;
	}
}
